<template>
    <div>
        <div class="info-box">
            <div class="name-box flex flex-align-center">
                <div class="label">姓名</div>
                <input type="text" placeholder="用户名" v-model="user_name" :readonly="is_readonly_name">
                <div class="span" v-if="is_readonly_name" @click="modifyFn('is_readonly_name')">修改</div>
                <div class="span" @click="keepFn('is_readonly_name')" v-if="!is_readonly_name">保存</div>
                <div class="span close" @click="closeFn('is_readonly_name')" v-if="!is_readonly_name">取消</div>
            </div>
            <div class="name-box flex flex-align-center">
                <div class="label">登录邮箱</div>
                <input type="text" class="email" v-model="user_email" :readonly="true">
                <div class="span" style='color:red;'>不可修改</div>
            </div>
            <div class="name-box flex flex-align-center">
                <div class="label">手机号</div>
                <input type="text" placeholder="空" v-model="user_tel" :readonly="is_readonly_tel">
                <div class="span" v-if="is_readonly_tel" @click="modifyFn('is_readonly_tel')">修改</div>
                <div class="span" @click="keepFn('is_readonly_tel')" v-if="!is_readonly_tel">保存</div>
                <div class="span close" @click="closeFn('is_readonly_tel')"  v-if="!is_readonly_tel">取消</div>
            </div>
            <div class="name-box flex flex-align-center">
                <div class="label">登录密码</div>
                <input type="text" placeholder="登录网盘时密码" v-model="user_pwd" :readonly="true">
                <div class="span" @click="modifyFn('is_readonly_pwd')" v-if="!is_readonly_pwd">修改</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            is_readonly_name: true, //输入框是否可输入
            is_readonly_pwd: false, //是否显示修改吗，密码弹窗
            is_readonly_tel: true, //输入框是否可输入
            user_name:'', // 用户昵称
            user_tel:'', // 用户电话号码
            user_email:'', // 用户邮箱
            user_pwd:'', // 用户密码
        }
    },
    mounted () {
      this.getUserInfo();  
    },
    methods: {
        // 点击修改
        modifyFn(type){
            if(type == 'is_readonly_name'){
                this.is_readonly_name = false;
            }else if(type == 'is_readonly_tel'){
                this.is_readonly_tel = false;
            }else{
                // 打开密码修改框
                this.$store.commit('isshowMask',true);
                this.$store.commit('isshowMaskType','showPass');
            }
        },

        // 点击取消修改
         closeFn(type){
            if(type == 'is_readonly_name'){
                this.is_readonly_name = true;
            }else if(type == 'is_readonly_tel'){
                this.is_readonly_tel = true;
            }
        },

        // 保存提交数据
        keepFn(type){
            this.nick();
            if(type == 'is_readonly_name'){
                this.is_readonly_name = true;
            }else if(type == 'is_readonly_tel'){
                this.is_readonly_tel = true;
            }
        },

        // 修改用户名
        async nick(){
            var data = await this.$https.post('member/nick',{nick:this.user_name,mobile:this.user_tel});
            this.$toast({
                message: data.error
            });
            this.$store.commit('setUserNikeName',this.user_name);
        },

        // 获取用户信息
        async getUserInfo(){
            var {data} = await this.$https.post('member/getinfo',{})
            this.user_name = data.userNick;
            this.user_email = data.userMail;
            if(data.mobile)
                this.user_tel = data.mobile;
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../assets/css/modifyInfo/modifyInfo.less);
</style>


